<template>
<div>
      <el-row class="OLrow1"  type="flex" justify="center">
        <el-col :span="11" class="OLdiv1col1">
            <el-row class="OLrow2"  type="flex" justify="left"
            v-for="(data,index) in abc" :key="index"
            :style="index+1 == abc.length?'border-bottom:0px':''">
                <img src="../../assets/portal/21ThinkPad_New_S1/3.jpg" class="PImg">
                <div class="OLcol1div1" style="width: 210px;">
                    <span title="Envy13十一代酷睿i5轻薄便携办公用商务学生笔记本电脑"
                    style="cursor:pointer"
                    >Envy13十一代酷睿i5轻薄便携办公用商务学生笔记本电脑</span>
                </div>
                <div class="OLcol1div1" style="margin-top:46px">
                    <span style="color: rgb(131, 131, 131);">标配：i5-10210U/8G内存/512G</span>
                </div>
                <div class="OLcol1div1" style="margin-top:36px;margin-left:330px">
                    <span>×1</span>
                </div>
            </el-row>
        </el-col>
        <el-col :span="4" class="OLdiv1col1">
            <div class="OLcol1div2" :style="weizhi">
                <span class="div2span1">21312.00</span>
                <span class="div2span2">在线</span>
            </div>
        </el-col>
        <el-col :span="3" class="OLdiv1col1">
            <div class="OLcol1div2" :style="weizhi">
                <span style="color: rgb(131, 131, 131);">已取消</span>
                <span class="div2span3" :style="DetailsStyle"
                @mouseover="MOOrderspan1()" @mouseleave="MLOrderspan1()"
                >订单详情</span>
            </div>
        </el-col>
        <el-col :span="3" class="OLdiv1col1"></el-col>
        <el-col :span="3" class="OLdiv1col1" style="border-right: 1px solid rgb(221, 221, 221);">
            <div class="deletebtndiv" :style="weizhi2">
                <span class="deletebtn" :style="DeleteStyle"
                @mouseover="MOOrderspan2()" @mouseleave="MLOrderspan2()"
                >删除订单</span>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
export default {
    name:'test',
        data(){
            return{
                DetailsStyle:'',
                DeleteStyle:'',
                MyOrderData:'',
                imgshow:'',
                abc:[{0:'sadas'},{1:'dsadsa'},{2:'dsada'},{3:'dsa'}],
                weizhi:'',
                weizhi2:'',
            }
        },
        mounted(){
            this.weizhi=25+47*(this.abc.length-1)
            this.weizhi2=36+47*(this.abc.length-1)
            this.weizhi=`margin-top:${this.weizhi}px`
            this.weizhi2=`margin-top:${this.weizhi2}px`
        },
        methods:{
            MOOrderspan1(){
                this.DetailsStyle='color: rgb(255, 96, 131);'
            },
            MLOrderspan1(){
                this.DetailsStyle=''
            },
            MOOrderspan2(){
                this.DeleteStyle='color: rgb(255, 96, 131);'
            },
            MLOrderspan2(){
                this.DeleteStyle=''
            },
        },
}
</script>

<style scoped>
.OLrow2{
    height: 90px;
    border-bottom: 1px solid rgb(221, 221, 221);
}
.OLrow1{
    margin: 0px auto;
    max-width: 1000px;
    text-align: center;
    font-size: 12px;
    height: 100%;
    
}
.OLdiv1col1{
    /* border-top: 1px solid rgb(221, 221, 221); */
    border-bottom: 1px solid rgb(221, 221, 221);
    border-left: 1px solid rgb(221, 221, 221);
}
.PImg{
    margin-top: 18px;
    margin-left: 30px;
    float: left;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.OLcol1div1{
    margin-left: 95px;
    margin-top: 28px;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.OLcol1div2{
    margin-top: 25px;
}
.div2span1{
    font-weight: 550;
    font-size: 13px;
}
.div2span2{
    position: absolute;
    margin-left: -40px;
    margin-top: 19px;
    color: rgb(131, 131, 131);
}
.div2span3{
    cursor: pointer;
    position: absolute;
    margin-top: 19px;
    margin-left:-42px;
}
.deletebtndiv{
    margin-top:36px;
}
.deletebtn{
    cursor: pointer;
}
</style>